<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据查询页面</title>
    <link href="{% static 'fonts/iconfont.css' %}" rel="stylesheet" media="all"/>
    <link href="{% static 'layui/css/layui.css' %}" rel="stylesheet" media="all"/>
</head>
<style>
    .layui-col-space10 > * {
        padding: 0 !important;
    }

    body {
        margin: 0;
        padding: 0;
        background: #f2f2f2;
    }

    div {
        border-radius: 10px !important;
    }

    .view_border {
    {#border: 1px solid red;#}
    }

    .main {
        margin: 20px auto;
        width: 1300px;
        height: 700px;
        display: flex;
        justify-content: space-between;
    }

    .main-left {
        width: 390px;
        min-height: 100%;
    }

    .main-right {
        width: 1200px;
        min-height: 100%;
    }

    .main-left-top {
        min-height: 50px;
    }

    .main-left-bottom {
        margin-top: 20px;
        min-height: 200px;


    }

    .main-right-middle {
        min-height: 30px;
        border: 1px solid #0c0c0c;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
    }


    .main-right-top {
        min-height: 100px;
    }

    .main-right-bottom {
        min-height: 700px;
    }

    .icon {
        display: block;
        line-height: 30px;
        width: 25px;
        height: 25px;
    }

    .search_view {
        margin: 20px;
        min-height: 50px;
        line-height: 100px;
        background: white;
        display: flex;
        justify-content: space-between;
        padding-left: 16px;
        padding-right: 16px;
    }

    .s_input {
        width: 90%;
        margin-left: 20px;
        color: black;
        font-size: 16px;
        font-weight: bold;
        border: none;
    }

    .n_icon {
        width: 30px;
        height: 30px;
        font-size: 30px;
        line-height: 50px;
        cursor: pointer;

    }

    .gridTable {
        margin: 20px 0px 20px 0px;
    }

    .gridItem_view {

        margin: 10px;
        width: 283px;
        text-align: center;
        height: 300px;
        line-height: 300px;
        box-shadow: 0px 0px 12px 5px rgba(98, 107, 181, .25);
        cursor: pointer;
        transition: all 0.6s;
    }

    .gridItem_view:hover {
        transform: scale(1.1);
    }

    .gridItem_view_title {
        padding: 5px !important;
        height: 20px;
        line-height: 20px;
        text-align: left;
        font-size: 14px;
    }

    .gridItem_view_subinfo {
        display: flex;
        justify-content: space-between;
        padding-top: 20px !important;
    }

    .page_view {
        background: white;
        padding: 10px 20px 10px 20px;
        height: 45px;
        margin: 20px auto;
    }

    .layui-form-label {
        padding: 9px 0px !important;
        text-align: left !important;
        width: 60px !important;
    }

    .layui-input-block {
        margin-left: 60px !important;
        min-height: 36px !important;
    }

    .layui-table-cell {
        overflow: visible;
        text-overflow: inherit;
        white-space: normal;
        height: 100px;
    }

    table thead th div {
        height: 38px !important;
    }

    .tableImg {
        width: 60px;
        height: 30px;
    }

    .tableImgdiv {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 100px;
        overflow: hidden;
        overflow-x: auto;
        overflow-y: hidden;
    }
</style>
<body>

<div class="main view_border">
    <div class="main-left view_border">
        <div class="main-left-top">
            <div style="height: 20px"></div>
            <div class="layui-card">
                <div class="layui-card-header">设置</div>
                <div class="layui-card-body">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">关键词</label>
                            <div class="layui-input-block">
                                <input type="text" name="username" lay-verify="required" placeholder="请输入"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn " style="float: right;" lay-submit
                                        lay-filter="demo1">立即提交
                                </button>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="main-left-bottom">
            <div class="layui-card">
                <div class="layui-card-header">爬虫信息</div>
                <div class="layui-card-body" style="display: flex;flex-wrap: nowrap;
    justify-content: space-between;">
                    <span id="spider-name">爬虫状态</span>
{#                    <span id="spider-state" style="height: 26px;line-height: 26px;" class="layui-badge layui-bg-orange">#}
{#                    </span>#}
                </div>
            </div>
            <div class="layui-card" style="    width: 388px;">
                <div class="layui-card-header">爬虫运行情况</div>

                <div class="layui-card-body" style="display: flex;flex-wrap: nowrap;justify-content: space-between;">
                    <div id="RunList"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="main-right view_border">

        <div class="main-right-top view_border">
            <div class="search_view">
                <input type="text" name="keyWord" class="s_input" placeholder="请输入搜索的文字...">
                <span class="icon n_icon iconfont icon-Image" style="margin-right: 20px;"></span>
                <span class="icon n_icon iconfont icon-sousuo" style="font-size: 25px; "></span>
            </div>
        </div>
        <div class="main-right-middle">
            <span class="icon iconfont icon-list" onclick="ChangeView('list')"></span>
            <span class="icon iconfont icon-grid" onclick="ChangeView('grid')"></span>
        </div>
        <div class="main-right-bottom">
            <table class="layui-hide tableList" id="tableList" lay-filter="userinfo" style="display: none"></table>
            <div class="wsp-table" id="imgCard"></div>
            <div id="laypage" class="page_view"></div>


        </div>

    </div>
</div>
<script id="imgCardScript" type="text/html">
    <!-- 面板使用的是栅格布局，我们用 layui-row 来定义行之后，只需使用layui-col-（标记+列数）就可以进行进行排序。 -->
    <div class="layui-row" style="display: flex;">
        <div class="layui-row layui-col-space10">
            {% verbatim %}
            {{# layui.each(d, function(index, item){ }}

            <div class="layui-col-sm3 gridItem_view">
                <div class="layui-carousel item_banner">
                    <div carousel-item>
                        {{#
                        var pics=[];
                        if(item.imgs){
                        pics = item.imgs.split(",");
                        }
                        layui.each(pics, function(img_index, img_item){ }}
                        <img src="/static/{{ img_item }}" alt="">
                        {{# }); }}
                    </div>
                </div>
                <h3 class="gridItem_view_title">{{ item.name }}</h3>
                <div class="gridItem_view_subinfo" style="display: flex;">
                    <h4 class="gridItem_view_title">编号：{{ item.code }}</h4>
                    <h4 class="gridItem_view_title">{{ item.regtime }}</h4>
                </div>
            </div>
            {{# }); }}
            {% endverbatim %}
        </div>
    </div>
</script>

<script id="RunListScript" type="text/html">

    {% verbatim %}
    {{#
    layui.each(d, function(index, item){ }}
    <div style="display: flex;    margin: 10px 0px 10px 0px;">
        <span>{{ item.spider }}</span>
        <span style="height: 26px;line-height: 26px; margin: 0 10px 0 10px;" class="layui-badge {{ item.stateColor }}" >
                    {{ item.state }}
                </span>
        <span style="height: 26px;line-height: 26px; margin: 0 10px 0 10px;">
                     {{ item.start_time }}
                </span>
    </div>

    {{# });
    }}
    {% endverbatim %}


</script>

<script id="Tableimages" type="text/html">
    <div class="tableImgdiv">
        {% verbatim %}
        {{#
        var pics=[];
        if(d.imgs){
        pics = d.imgs.split(",");
        }
        layui.each(pics, function(index, item){ }}
        <img src="/static/{{ item }}" alt="" class="tableImg" style="border-radius: 5px; ">
        {{# });
        }}
        {% endverbatim %}
    </div>

</script>


{# 导入jquery#}
<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script src="{% static 'layui/layui.js' %}"></script>
<script src="{% static '/js/Untils.js' %}"></script>


<script>

    layui.use(['form', 'element', 'table', 'carousel', 'laypage'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            element = layui.element,
            laypage = layui.laypage;

        console.log("table", table)
        reloadTable();
        LoadAllBanner();
        //分页初始化
        InitSpiderInfo();
        //LoadableData();

    });

    $(function () {
        $("div[lay-id='tableList']").show();
    });

    function ChangeView(ViewType) {
        if (ViewType === "list") {
            $("div[lay-id='tableList']").show();
            $("#imgCard").hide();
            //LoadableData();
        }
        if (ViewType === "grid") {
            $("div[lay-id='tableList']").hide();
            $("#imgCard").show();
            LoadGridTableData();
        }
    }

    function InitSpiderInfo() {
        $.ajax({
            type: "get",
            url: "/api/scrapyd.server/listspiders",//对应controller的URL
            async: false,
            contentType: "application/json",
            success: function (ret) {
                spiders = ret.spiders;  //设置总条数
                //获取
                if (spiders) {
                    $("#spider-name").text(spiders[1])
                }
            }
        });

        GetRunlistData();

    }

    function GetRunlistData() {
        $.ajax({
            type: "get",
            url: "api/scrapyd.server/listjobs",//对应controller的URL
            async: false,
            contentType: "application/json",
            success: function (ret) {
                var alldata = [];
                for (let i = 0; i < ret.pending.length; i++) {
                    // 逻辑
                    var item = ret.pending[i]
                    if (item) {
                        item.state = "暂停"
                        item.stateColor = ""
                    }
                    alldata.push(item)
                }
                for (let i = 0; i < ret.running.length; i++) {
                    // 逻辑
                    var item = ret.running[i]
                    if (item) {
                        item.state = "运行"
                        item.stateColor = "layui-bg-orange"
                    }
                    alldata.push(item)
                }
                for (let i = 0; i < ret.finished.length; i++) {
                    // 逻辑
                    var item = ret.finished[i]
                    if (item) {
                        item.state = "完成"
                        item.stateColor = "layui-bg-green"
                    }
                    alldata.push(item)
                }

                //const allData = [...data.finished, ...data.pending, ...data.running];
                alldata.sort(function (a, b) {
                    return a.start_time > b.start_time;
                });

                var getTpl = RunListScript.innerHTML,
                    view = document.getElementById('RunList');
                layui.use(['laytpl'], function (laytpl) {
                    laytpl(getTpl).render(alldata, function (html) {
                        view.innerHTML = html;
                        //$("#RunList").innerHTML = html; // 将渲染后的 HTML 插入到页面中
                    })
                });


                {#console.log("alldata;;;;", alldata)#}
            }
        });
    }

    function LoadableData(page_index, page_size) {
        if (!page_index)
            page_index = 1
        if (!page_size)
            page_size = 10

        $.ajax({
            type: "get",
            url: "/api/WipoInfo/?page=" + page_index + "&limit=" + page_size,//对应controller的URL
            async: false,
            contentType: "application/json",
            success: function (ret) {
                total = ret.count;  //设置总条数
                console.log(ret);
                data = ret.data;
                layui.use(['laytpl'], function (laytpl) {
                    var laypage = layui.laypage;
                    table = layui.table,
                        laypage.render({
                            elem: 'laypage', //注意，这里的 page 是 ID，不用加 # 号
                            count: ret.count, //数据总数，从服务端得到
                            limit: ret.page_size, // 每页条数
                            curr: ret.page_index,
                            prev: "<<",
                            next: ">>",
                            limits: [10, 20, 50, 100],//每页条数的选择项
                            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                            skip: true,
                            jump: function (obj, first) {
                                console.log("jump--onj:::", obj, first)
                                if (!first) {
                                    LoadableData(obj.curr, 10);//查询当页数据
                                    //$(".layui-icon-refresh").click();
                                }
                            }
                        });
                });

            }
        });


    }

    function LoadGridTableData(page_index, page_size) {

        if (!page_index)
            page_index = 1
        if (!page_size)
            page_size = 10

        console.log("LoadGridTableData::;", page_index, page_size)

        // 把渲染完成的imgCardScript放入到imgCard里面
        $.ajax({
            type: "get",
            url: "/api/WipoInfo/?page=" + page_index + "&limit=" + page_size,//对应controller的URL
            async: false,
            contentType: "application/json",
            success: function (ret) {
                total = ret.count;  //设置总条数
                console.log(ret);
                data = ret.data;
                var getTpl = imgCardScript.innerHTML,
                    view = document.getElementById('imgCard');

                layui.use(['laytpl'], function (laytpl) {
                    var laypage = layui.laypage;
                    laytpl(getTpl).render(data, function (html) {
                        view.innerHTML = html;
                        LoadAllBanner();
                        //初始化页面
                        console.log("分页---", ret);
                        laypage.render({
                            elem: 'laypage', //注意，这里的 page 是 ID，不用加 # 号
                            count: ret.count, //数据总数，从服务端得到
                            limit: ret.page_size, // 每页条数
                            curr: ret.page_index,
                            prev: "<<",
                            next: ">>",
                            limits: [10, 20, 50, 100],//每页条数的选择项
                            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                            skip: true,
                            jump: function (obj, first) {
                                console.log("jump--onj:::", obj, first)
                                if (!first) {
                                    LoadGridTableData(obj.curr, 10);//查询当页数据
                                }
                            }
                        });
                    })
                });
            }
        });

    }

    function LoadAllBanner() {
        var $itemBanner = $(".item_banner");
        for (let i = 0; i < $itemBanner.length; i++) {
            var bannerItem = $itemBanner[i];
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: bannerItem
                , arrow: 'none'
                , width: '100%' //设置容器宽度
                , height: '200px'
                , anim: 'fade' //切换动画方式
            });
        }
    }

    function reloadTable(page_index, page_size) {
        if (!page_index)
            page_index = 1
        if (!page_size)
            page_size = 10
        var table = layui.table,
            laypage = layui.laypage;
        table.render({
            elem: '#tableList',
            url: '/api/WipoInfo/',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            where: {
                page: page_index, // 当前页码
                limit: page_size // 每页显示条数
            },
            cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true},
                {field: 'name', width: 130, title: '名字'},
                {field: 'source', width: 80, title: '来源', sort: true},
                {field: 'code', width: 120, title: '编号', sort: true},
                {field: 'holder', title: '持有方', edit: 'text'},
                {field: 'regtime', title: '注册时间', sort: true},
                {field: 'imgs', width: 250, title: '图片', templet: "#Tableimages"},
                {title: '操作', minWidth: 150, toolbar: '#demo', align: "center"}
            ]],
            limits: [10, 20, 50, 100],
            skin: 'line',
            done: function (e) {
                {#debugger;#}
                console.log("分页---", e);
                laypage.render({
                    elem: 'laypage', //注意，这里的 page 是 ID，不用加 # 号
                    count: e.count, //数据总数，从服务端得到
                    curr: page_index,
                    limit: page_size, // 每页条数
                    prev: "<<",
                    next: ">>",
                    {#theme: "#0099ff",#}
                    limits: [10, 20, 50, 100],//每页条数的选择项
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                    skip: true,
                    jump(obj, first) {
                        if (!first) {
                            reloadTable(obj.curr, 10);//查询当页数据
                        }
                    }
                });
            },
            page: false,
        })
    }
</script>
</body>

</html>